import { SettingO, Edit } from "@react-vant/icons";
import React from "react";
import "./my.css";
import { useNavigate } from "react-router-dom";

export default function Mys() {
  const Navigate = useNavigate();
  return (
    <div id="my" className="animate__animated animate__fadeInDown">
      <div className="my-head">
        <span className="my-title">我的</span>
        <span
          onClick={() => {
            Navigate("/set");
          }}
        >
          <SettingO
            style={{
              border: "1px solid #ccc",
              borderRadius: "0.5rem",
              padding: "2%",
              position: "absolute",
              right: "2%",
              top: "2%",
            }}
          />
        </span>
      </div>

      <div className="my-content">
        <img src="../my.png" className="my-img" />
        <p>
          Koto
          <Edit color="red" />
        </p>
        <p style={{ marginTop: "10px", color: "rgb(156, 156, 156)" }}>
          个性签名信息展示，最多展示一行
        </p>
      </div>

      <div className="weight">
        <div className="my-bg">
          <div className="my-bg-con">
            <p style={{ color: "green", marginBottom: "5px" }}>体重</p>
            <p>
              <span>45 </span>
              <span style={{ color: "rgb(156, 156, 156)" }}>kg</span>
            </p>
          </div>
        </div>
        <div className="my-bg">
          <div className="my-bg-con">
            <p style={{ color: "green", marginBottom: "5px" }}>年龄</p>
            <p>
              <span>25 </span>
              <span style={{ color: "rgb(156, 156, 156)" }}>岁</span>
            </p>
          </div>
        </div>
        <div className="my-bg">
          <div className="my-bg-con">
            <p style={{ color: "green", marginBottom: "5px" }}>身高</p>
            <p>
              <span>165 </span>
              <span style={{ color: "rgb(156, 156, 156)" }}>cm</span>
            </p>
          </div>
        </div>
      </div>

      <div className="my-fs">
        <div className="my-food">
          <p>食物</p>
          <p
            style={{ fontSize: "clamp(0.1rem, 7vw, 10rem)", marginTop: "8% " }}
          >
            1.284
          </p>
          <p>千卡</p>
        </div>
        <div className="my-sleep">
          <p>睡眠</p>
          <p
            style={{ fontSize: "clamp(0.1rem, 7vw, 10rem)", marginTop: "8% " }}
          >
            8
          </p>
          <p>小时</p>
        </div>
      </div>
    </div>
  );
}
